<template>
	<view style="display: flex;flex-direction: column;align-items: center;width: 100%;" v-if="pageInit">
		<view class="headerContainer">
			<view class="headerWrapper">
				<view class="title">
					{{active==1 ? '首期还款（元）': '每月还款（元）'}}
				</view>
				<view class="loanMoneyTotalWrapper">
					{{monthPay}}
				</view>
				<view class="itemWrapper">
					<view class="item">
						{{(loanMoneyTotal/10000).toFixed(2)}}
						<view class="text">
							贷款总额（万元）
						</view>
					</view>
					<view class="item">
						{{(interestTotal/10000).toFixed(2)}}
						<view class="text">
							利息总额（万元）
						</view>
					</view>
					<view class="item">
						{{months/12}}
						<view class="text">
							贷款年限（年）
						</view>
					</view>
				</view>
			</view>
		</view>


		<u-sticky bgColor="#fff" >
		
			<u-tabs :list="list" :lineHeight="'6rpx'" :lineWidth="'60rpx'" :activeStyle="{color:'#3c9cff'}"
				:inactiveStyle="{color:'#888'}" :itemStyle="{width:'375rpx',height: '80rpx'}"
				:current="active"
				@change="tabsClick"></u-tabs>
			<view class="tabRowContainer" style="color: #888;">
				<view class="indexWrapper">
					期数
				</view>
				<view class="tab1">
					月供总额
				</view>
				<view class="tab1">
					月供本金
				</view>
				<view class="tab1">
					月供利息
				</view>
				<view class="tab1">
					待还本金
				</view>
			</view>
		</u-sticky>
	
		<view v-for="(item,index) in perList" :key="index" class="tabRowContainer">
			<view class="indexWrapper">
				{{item.index}}
			</view>
			<view class="tab1">
				{{item.monthPay}}
			</view>
			<view class="tab1">
				{{item.principal}}
			</view>
			<view class="tab1">
				{{item.interest}}
			</view>
			<view class="tab1">
				{{item.waitPay}}
			</view>
		</view>
		<shareButton
			@onShare="onShare({
				sharePath: sharePath,
			})"
			:text="'分享房贷计算器'">
		</shareButton>
		
<!-- 		<shareButton
			@onShare="onShare"
			:text="'分享房贷计算器'">
		</shareButton> -->
	</view>
</template>

<script>
	const api = require("@/static/js/api.js")
	import LoanCaculate from "../components/calculator/LoanCaculate.js"
	import shareButton from "@/components/shareButton/shareButton.vue"
	export default {
		components: {},
		data() {
			return {		
				loanMoneyTotal: 0,
				interestTotal: 0,
				rateNumTotal: 0,
				list: [{
						name: '等额本息(元)'
					},
					{
						name: '等额本金(元)'
					},
				],
				
				loanMoneyTotal: 0,
				interestTotal: 0,
				
				loanMoneyBusiness: 0,
				rateNumBusiness: 0,
						
				loanMoneyProvident: 0,
				rateNumProvident: 0,
				
				months: 0,
				monthPay: 0,
				active: 0,
				perList: [],
				pageInit: false,
				
				type: 0, 
				dataObj: {},
				sharePath:""
			}
		},
		onLoad(option) {
			this.sharePath = "/pages/calculator/record/detail?id=" + option.id
			if (option.active){
				this.active = option.active
			}
			this.id = option.id
			this.getCalculatorDetail()		
		},
		methods: {
			getCalculatorDetail(){
			
				let that = this
				api.getCalculatorDetail({
					param: {
						id: that.id,
					}
				}).then(res => {
					console.log(res)
					if (res.success) {  
						that.setInit(JSON.parse(res.data.data))
					}
				})
				
			},
			setInit(obj){
				this.form = obj.form
				this.type = obj.type
				
				this.dataObj = obj
				
				var data = this.dataObj
				console.log("setInit", obj)
				if (this.type == 2) {
					this.loanMoneyBusiness = Number(data.loanMoneyBusiness);
					this.loanMoneyProvident = Number(data.loanMoneyProvident);
					this.loanMoneyTotal = this.loanMoneyBusiness + this.loanMoneyProvident; //贷款总价
					this.months = data.months;
					this.rateNumBusiness = Number(data.rateNumBusiness);
					this.rateNumProvident = Number(data.rateNumProvident);
				
				} else {
					this.loanMoneyTotal = data.loanMoneyTotal;
					this.months = data.months;
					this.rateNumTotal = data.rateNumTotal;
				}
				console.log("setInit result:",this.loanMoneyTotal, this.months, this.rateNumTotal)
				this.caculateAcpi(this.active)
			},
			
			
			recalculate() {
				uni.navigateBack()
			},
			setPreList1(){
				let monthPay = 0;
				let totalPay = 0;
				this.perList.splice(0, this.perList.length)
				monthPay = LoanCaculate.Acpi(this.rateNumTotal, this.loanMoneyTotal, this.months)
				totalPay = monthPay * this.months;
				var hasPay = 0
				for (let month = 0; month < this.months; month++) {
					var principal = LoanCaculate.AcpiMonthBenji(this.rateNumTotal, this.loanMoneyTotal, month, monthPay)
					var interest = monthPay - principal
					hasPay += principal
					var waitPay = this.loanMoneyTotal - hasPay
					var obj = {
						index: (month + 1),
						monthPay: monthPay.toFixed(2),
						principal: principal.toFixed(2),
						interest: interest.toFixed(2),
						waitPay: waitPay.toFixed(2),
					}
					this.perList.push(obj)
				}
				this.monthPay = monthPay.toFixed(2);
				this.interestTotal = totalPay - this.loanMoneyTotal;
			},
			
			
			setPreList2() {
				
				this.perList.splice(0, this.perList.length)
				// 计算利息
				var totalPay = 0
				for (let month = 0; month < this.months; month++) {
					var monthPay = LoanCaculate.AverageCapital(this.rateNumTotal, this.loanMoneyTotal, this.months, month)
					totalPay += monthPay;
				}
				this.interestTotal = totalPay - this.loanMoneyTotal;
				
				
				var principal = this.loanMoneyTotal/this.months
				var firstMonthPay = LoanCaculate.AverageCapital(this.rateNumTotal, this.loanMoneyTotal, this.months, 0)
				var secondMonthPay = LoanCaculate.AverageCapital(this.rateNumTotal, this.loanMoneyTotal, this.months, 1)
				var monthDeltaMoney = firstMonthPay - secondMonthPay
				this.monthPay = firstMonthPay.toFixed(2);
	
				for (let i = 0; i < this.months; i++) {
					var currentMonthPay = firstMonthPay - monthDeltaMoney*i			
					var obj = {
						index: (i+1),
						monthPay: currentMonthPay.toFixed(2),
						principal: principal.toFixed(2),
						interest: (currentMonthPay - principal).toFixed(2),
						waitPay: (this.loanMoneyTotal - principal*(i+1)).toFixed(2),
					}		
					this.perList.push(obj)
				}
			},
			
			setGroupPreList1(){
				// 利息总额
				var monthPayBusiness = LoanCaculate.Acpi(this.rateNumBusiness, this.loanMoneyBusiness, this.months); //商贷月付
				var monthPayProvident = LoanCaculate.Acpi(this.rateNumProvident, this.loanMoneyProvident, this.months); //商贷月付
				var monthPayTotal = (monthPayBusiness + monthPayProvident)		
				var totalPay = monthPayTotal * this.months;
				console.log(monthPayBusiness, monthPayProvident,this.rateNumBusiness)
				this.interestTotal = totalPay - this.loanMoneyTotal;
				
				var hasPay = 0
				this.perList.splice(0, this.perList.length)
				for (let month = 0; month < this.months; month++) {
					var principalBusiness = LoanCaculate.AcpiMonthBenji(this.rateNumBusiness, this.loanMoneyBusiness, month, monthPayBusiness)
					var principalProvident = LoanCaculate.AcpiMonthBenji(this.rateNumProvident, this.loanMoneyProvident, month, monthPayProvident)
					var principalTotal = principalBusiness + principalProvident
					var interestTotal = monthPayTotal - principalTotal
					hasPay += principalTotal
					var waitPay = this.loanMoneyTotal - hasPay
					var obj = {
						index: (month + 1),
						monthPay: monthPayTotal.toFixed(2),
						principal: principalTotal.toFixed(2),
						interest: interestTotal.toFixed(2),
						waitPay: waitPay.toFixed(2),
					}
					this.perList.push(obj)
				}
				this.monthPay = monthPayTotal.toFixed(2);
				
			},
			
			
			setGroupPreList2() {
				
				this.perList.splice(0, this.perList.length)
				// 计算利息
				var totalPay = 0
				for (let month = 0; month < this.months; month++) {
					var monthPayBusiness = LoanCaculate.AverageCapital(this.rateNumBusiness, this.loanMoneyBusiness, this.months, month) 
					var monthPayProvident = LoanCaculate.AverageCapital(this.rateNumProvident, this.loanMoneyProvident, this.months, month)
					var monthPayTotal = monthPayBusiness + monthPayProvident
					totalPay += monthPayTotal;
				}
				this.interestTotal = totalPay - this.loanMoneyTotal;
				
				var principalTotal = this.loanMoneyTotal/this.months
				
				var firstMonthPayBusiness = LoanCaculate.AverageCapital(this.rateNumBusiness, this.loanMoneyBusiness, this.months, 0)
				var secondMonthPayBusiness = LoanCaculate.AverageCapital(this.rateNumBusiness, this.loanMoneyBusiness, this.months, 1)
				var monthDeltaMoneyBusiness = firstMonthPayBusiness - secondMonthPayBusiness 
				
				var firstMonthPayProvident = LoanCaculate.AverageCapital(this.rateNumProvident, this.loanMoneyProvident, this.months, 0)
				var secondMonthPayProvident = LoanCaculate.AverageCapital(this.rateNumProvident, this.loanMoneyProvident, this.months, 1)
				var monthDeltaMoneyProvident = firstMonthPayProvident - secondMonthPayProvident	
				
				var firstMonthPay = firstMonthPayBusiness + firstMonthPayProvident
				var monthDeltaMoney = 	monthDeltaMoneyBusiness + monthDeltaMoneyProvident		
							
				this.monthPay = firstMonthPay.toFixed(2);
				
				for (let i = 0; i < this.months; i++) {
					var currentMonthPay = firstMonthPay - monthDeltaMoney*i			
					var obj = {
						index: (i+1),
						monthPay: currentMonthPay.toFixed(2),
						principal: principalTotal.toFixed(2),
						interest: (currentMonthPay - principalTotal).toFixed(2),
						waitPay: (this.loanMoneyTotal - principalTotal*(i+1)).toFixed(2),
					}		
					this.perList.push(obj)
				}
			},
			
				
			tabsClick(item) {
				var index = item.index
				this.active = index
				this.caculateAcpi(this.active)
			},

			caculateAcpi(isAcpi) {
				if (!isAcpi) {
					if (this.type==2){
						this.setGroupPreList1()
					}else{
						this.setPreList1()
					}
				} else {
					if (this.type==2){
						this.setGroupPreList2()
					}else{
						this.setPreList2()
					}
				}
				this.pageInit = true
			},
			// onShare(){
			// 	console.log("onShare", this.dataObj)
			// }
		}
	}
</script>
<style>


</style>

<style lang="scss" scoped>
	.headerContainer {
		background-color: #f8f8f8;
		width: 100%;
	}

	.headerWrapper {
		margin-top: 20rpx;
		margin-left: 18rpx;
		margin-bottom: 20rpx;
		width: 714rpx;
		padding: 30rpx;
		background-color: #409EFF;
		background-image: url(@/pages/shop/static/image/home_bg.jpg);
		color: #fff;
		box-shadow: 2rpx 2rpx 2rpx 1rpx #FFFFFF;
		border-radius: 31rpx;

		.title {
			font-size: 24rpx;
			line-height: 40rpx;
		}

		.loanMoneyTotalWrapper {
			font-size: 60rpx;
			line-height: 80rpx;
			margin-bottom: 40rpx;
		}

		.itemWrapper {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item {
				width: 200rpx;
				line-height: 40rpx;
				font-size: 30rpx;

				.text {
					font-size: 24rpx;
					margin-bottom: 15rpx;
					line-height: 30rpx;
				}
			}
		}
	}


	.tabRowContainer {
		display: flex;
		justify-content: space-between;
		font-size: 22rpx;
		line-height: 50rpx;
		text-align: center;
		color: #000;
		width: 750rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #f3f3f3;

		.indexWrapper {
			width: 80rpx;
		}

		.tab1 {
			width: 180rpx;
		}
	}

</style>